import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

import 'package:state_flutter/components/NavBar/navbar.dart';

import 'package:state_flutter/common/script/utils.dart' show formatTime;

class RegisterPage extends StatefulWidget {
  RegisterPage({Key key}) : super(key: key);

  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: NavBar({
        'title': '',
        'elevation': 0.0,
        'backgroundColor': Colors.white
      }),
      body: RegisterBody(),
    );
  }
}


class RegisterBody extends StatefulWidget {
  RegisterBody({Key key}) : super(key: key);

  @override
  _RegisterBodyState createState() => _RegisterBodyState();
}

class _RegisterBodyState extends State<RegisterBody> {
  
  bool agree = false;
  int sex = 0;
  bool show = false;

  List hobby = [
    {"id": 0, "val": '吃饭', "checked": false},
    {"id": 1, "val": '睡觉', "checked": false},
    {"id": 2, "val": '学习', "checked": false}
  ];

  String date = formatTime(DateTime.now().millisecondsSinceEpoch, match: 'y年m月d日');
  String time = formatTime(DateTime.now().millisecondsSinceEpoch, match: 'h:i:s');
  DateTime datetime = new DateTime.now();
  //原生日期选择组件
  _showDatePicker() async{
    var date = await showDatePicker(
      context: context,
      initialDate: new DateTime.now(),
      firstDate: DateTime(1980),
      lastDate: DateTime(2100)
    );

    if(date != null){
      setState(() {
        this.date = formatTime(date.millisecondsSinceEpoch, match: 'y年m月d日');
      });
    }
  }
  //原生时间选择组件
  _showTimePicker() async{
    var time = await showTimePicker(
      context: context,
      initialTime: TimeOfDay(hour: 12, minute: 00),
    );

    if(time != null){
      setState(() {
        this.time = time.format(context);
      });
    }
  }

  /*
   * Cupertino ios风格日期时间选择器
   * DatePickerWidget({})
   * TimePickerWidget({})
   */
  _showDateCupertinoPicker(){
    DatePicker.showDatePicker(
      context,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
        confirm: Text('确定'),
        cancel: Text('取消')
      ),
      minDateTime: DateTime.parse('1980-05-12'),
      maxDateTime: DateTime.parse('2100-05-12'),
      initialDateTime: DateTime.now(),
      dateFormat: "yyyy-MMMM-dd H时:m分",
      pickerMode: DateTimePickerMode.datetime,  //时间需要添加
      locale: DateTimePickerLocale.zh_cn,
      onCancel: (){
        //取消
        debugPrint('err');
      },
      onConfirm: (dateTime, List<int> i){
        //确认
        //dateTime DateTime类型
        setState(() {
          this.datetime = dateTime;
        });
      }
    );
  }



  @override
  void initState() { 
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white
      ),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Switch(
                value: this.show,
                onChanged: (val){
                  setState(() {
                    this.show = val;
                  });
                },
              )
            ],
          ),
          Row(
            children: <Widget>[
              Radio(
                value: 0,
                groupValue: this.sex,
                onChanged: (val){
                  setState(() {
                    this.sex = val;
                  });
                },
              ),
              Text('男'),
              Radio(
                value: 1,
                groupValue: this.sex,
                onChanged: (val){
                  setState(() {
                    this.sex = val;
                  });
                },
              ),
              Text('女'),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //原生日期选择
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${this.date}')
                  ],
                ),
                onTap: _showDatePicker,
              ),
              //原生时间选择
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${this.time}')
                  ],
                ),
                onTap: _showTimePicker,
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //第三方ios风格日期时间选择
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${formatTime(this.datetime.millisecondsSinceEpoch, match: 'y-m-d h:i')}')
                  ],
                ),
                onTap: _showDateCupertinoPicker,
              ),
            ],
          ),
          Row(
            children: this.hobby.map((item){
              return Flex(
                direction: Axis.horizontal,
                children: <Widget>[
                  Checkbox(
                    value: item['checked'],
                    onChanged: (val){
                      setState(() {
                        item['checked'] = val;
                      });
                    },
                  ),
                  Text(
                    '${item['val']}',
                    style: TextStyle(),
                  ),
                  
                ],
              );
            }).toList(),
          ),
          Row(
            children: <Widget>[
              Checkbox(
                value: this.agree,
                onChanged: (val){
                  setState(() {
                    this.agree = val;
                  });
                },
              ),
              RichText(
                text: TextSpan(
                  text: '阅读并同意',
                  style: TextStyle(
                    color: Colors.black45,
                    fontSize: 14.0,
                  ),
                  children: <TextSpan>[
                    TextSpan(
                      text: '服务协议',
                      style: TextStyle(
                        color: Colors.blue
                      ),
                      recognizer: TapGestureRecognizer()..onTap = () {
                        print('服务协议');
                      }
                    )
                  ]
                )
              )
            ],
          ),
          Row(
            children: <Widget>[

            ],
          )
        ],
      ),
    );
  }
}